<template>
  <div>
    <h1>{{msg}}</h1>
    <button @click="changeMsg">点我修改数据</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "hello vue"
    }
  },
  // 3、更新阶段
  // 数据修改，真实DOM更新前触发
  beforeUpdate(){
    // 不可以获取到更新后的dom数据
    console.log("beforeUpdate", document.querySelector("h1").innerHTML);
  },
  // 数据修改，真实DOM更新后触发
  updated(){
    // 可以获取到更新后的dom数据
    console.log("updated", document.querySelector("h1").innerHTML);
  },
  methods:{
    changeMsg(){
      this.msg = "hello world!"
    }
  }
}
</script>

<style>

</style>